import React, { Fragment } from 'react'
import http from 'libs/http';
import Tabs from '../../components/Tabs'
import { Pagination } from 'antd'
import SubscribeModal from '../components/SubscribeModal'
import { MediaPlayer } from 'components'
import { NoData } from 'components';

export default class FreeClasses extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    queryData: {
      courseType: 0,
      pageIndex: 1,
      pageSize: 6,
      platformType: 0,
    },
    total: 0,
    freeClassesList: [],
    showModal: false,
    courseData: {}, // 当前点击的直播课预约数据
    showMediaModal: false,
    mediaUrl: '',
    mediaModalTitle: '',
    current: 1
  }

  componentDidMount() {
    this.getAuditionsList()
  }

  // componentWillReceiveProps(nextProps) {

  //   this.uploadPlatformType(nextProps)
  // } 

  // 初始化或切换左侧menu时，获取路由参数
  // uploadPlatformType = (nextProps) => {
  //   const { platformType } = nextProps.match.params
  //   this.setState(state => ({
  //     queryData: {...state.queryData, platformType, pageIndex: 1 }
  //   }), this.getAuditionsList)
  // }

  // 获取免费试听课列表
  getAuditionsList = () => {
    const { queryData } = this.state
    http.get('/student/auditions/list', queryData).then(res => {
      console.log(res)
      const { total, list, pageNum: current } = res.data
      const listLen = list.length
      if(listLen < 6) {
        list.length = 6
        list.fill({}, listLen, 6)
      }
      this.setState({
        total, freeClassesList: list, current
      })
    })
  }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState(state => ({
      tabsData, queryData: {...state.queryData, courseType, pageIndex: 1}
    }), this.getAuditionsList)
  }

  // 切换页码
  changePage = (page) => {
    this.setState(state => ({
      queryData: { ...state.queryData, pageIndex: page }
    }), this.getAuditionsList)
  }

  // 点击立即预约、免费播放
  handleClick = course => () => {
    const { platformType, courseId, courseName } = course
    // 直播课
    if(platformType === 2 ){
      this.setState({
        showModal: true,
        courseData: { courseId, courseName }
      })
    }
    // 录播课
    else if(platformType === 3) {
      const showErrorNotice = true
      http.get('/student/auditions/getRecording', { courseId }, {}, showErrorNotice).then(res => {
        this.setState({
          showMediaModal: true,
          mediaUrl: res.data,
          mediaModalTitle: courseName
        })
      })
    }
  }
  onCancel = () => {
    this.setState({
      showMediaModal: false,
      mediaUrl: '',
      mediaModalTitle: '',
    })
  }

  // 预约成功刷新页面
  handleSubscribe = () => {
    this.setState({ showModal: false }, this.getAuditionsList)
  }

  closeSubscribeModal = () => {
    this.setState({ showModal: false })
  }

  render() {
    const { tabsData, total, freeClassesList, showModal, courseData, mediaModalTitle, mediaUrl, showMediaModal, current } = this.state
    return (
      <Fragment>
        <Tabs tabsData={tabsData} changeTab={this.changeTab} />
        <div className="free-classes-content">
          {
            freeClassesList[0] && freeClassesList[0].courseName ? 
              freeClassesList.map((item, i) => {
                const { platformType, status, pcPictureUrl, courseName } = item
                let btnStr = ''
                let handleDisable = true
                if(platformType === 3) {
                  btnStr = '免费试听'
                  handleDisable = false
                }else{
                  switch(status) {
                    case 1: 
                      btnStr = '立即预约'
                      handleDisable = false
                      break;
                    case 2:
                      btnStr = '预约中'
                      break;
                    case 3:
                      btnStr = '不可预约'
                      break;
                    case 4:
                      btnStr = '已预约'
                      break;
                  }
                }
                return (
                  Object.keys(item).length > 0 ? (
                    <div key={i} className="free-classes-item">
                      <div className="img-wrap">
                        <img src={pcPictureUrl} />
                        <span className={platformType === 2 ? 'live-icon' : 'recorded-icon'}>{platformType===2 ? '直播' : '录播'}</span>
                      </div>
                      <p>{courseName}</p>
                      <span 
                        className={platformType===2 ? `status${status}` : ''}
                        onClick={handleDisable ? () => {} : this.handleClick(item) }
                      >{btnStr}</span>
                    </div>
                  ) : <div key={i} className="free-classes-item"></div>
                )
              }) : <NoData/>
          }
        </div>
        
        <div className="pagination-container">
          <Pagination
            size="small"
            pageSize={6}
            total={total}
            showQuickJumper
            hideOnSinglePage={true}
            onChange={this.changePage}
            current={current}
          />
        </div>
        <SubscribeModal 
          showModal={showModal}
          closeSubscribeModal={this.closeSubscribeModal}
          handleSubscribe={this.handleSubscribe}
          courseData={courseData}
        />
        <MediaPlayer 
          showMediaModal={showMediaModal}
          src={mediaUrl}
          title={mediaModalTitle}
          onCancel={this.onCancel}
        />
      </Fragment>
    )
  }
}